<!--js部分setup：代表的是组合式API，我们讲解的是选项式API，所有删除掉这个setup-->
<script >
//1.导入组件
import HelloWorld from './components/HelloWorld.vue'
export default {
  name: 'App',
  //2.注册子组件
  components: {
    HelloWorld,
  },
  data(){
    return {

    }
  },
  //函数
  methods:{

  },
  //挂载前执行的钩子函数
  mounted() {

  },
  //计算属性
  computed:{

  }
}
</script>

<!--2.模板，视图 template：根元素-->
<template>
  <div>
    <a href="https://vite.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://vuejs.org/" target="_blank">
      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
    </a>
  </div>
<!-- 子组件：3.使用子组件  -->
  <HelloWorld msg="Vite + Vue" />
</template>

<!--3.样式部分：scoped：作用域，这里的样式只对当前的vue文件有效-->
<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
